<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <link rel="stylesheet" href="plugins/aui-20170109-v2/css/aui.css" type="text/css"/>
    <link rel="stylesheet" href="plugins/aui-20170109-v2/css/aui-slide.css" type="text/css"/>
    <link rel="stylesheet" href="css/myWordMouth-css.css" type="text/css"/>
    <title>我的口碑</title>
</head>
<script type="text/javascript" src="js/myWordMouth-js.js"></script>
<body>

<!--头部开始-->
<header class="aui-bar aui-bar-nav">
    <a class="aui-pull-left aui-btn" href="index.html">
        <span class="aui-iconfont aui-icon-left"></span>返回
    </a>
    <div class="aui-title">我的口碑</div>
</header>
<!--头部结束-->

<!--资料显示-->
<ul class="list">
    <li class="aui-list-item">
        <div class="aui-media-list-item-inner bg-color">
            <div class="aui-list-item-media">
                <img src="img/myWordMouth-img/wdkb-01.jpg">
            </div>
            <div class="aui-list-item-inner">
                <div class="aui-list-item-text">
                    <div class="aui-list-item-title">杨大力</div>
                    <div class="aui-list-item-right">甜品控</div>
                </div>
            </div>
        </div>
    </li>
    <li class="aui-list-item aui-list-item-middle">
        <div class="aui-media-list-item-inner">
            <div class="aui-list-item-media">
                <img src="img/myWordMouth-img/wdkb-02.jpg" class="aui-img-round aui-list-img-sm">
            </div>
            <div class="aui-list-item-inner aui-list-item-arrow">
                <div class="aui-list-item-text aui-list-item-width">
                    <div class="aui-list-item-title aui-font-size-14">领取口碑卡</div>
                    <div class="aui-list-item-right">享折上8.8折</div>
                </div>
                <div class="aui-list-item-text aui-list-item-mag">
                    去口碑APP领取
                </div>
            </div>
        </div>
    </li>


</ul>
<div class="aui-content aui-margin-b-15">
    <ul class="aui-list aui-list-in">
        <li class="aui-list-item">
            <div class="aui-list-item-label-icon">
                <i class="aui-iconfont aui-icon-home"></i>
            </div>
            <div class="aui-list-item-inner aui-list-item-inner-two">
                我的评价
            </div>
            <div class="icon-right icon-right-width">
                <span>共一条待评价</span>
                <i class="aui-iconfont aui-icon-right middle"></i>
            </div>
        </li>
        <li class="aui-list-item aui-list-item-middle-two">
            <div class="aui-media-list-item-inner">
                <div class="aui-list-item-media">
                    <img src="img/myWordMouth-img/wdkb-03.jpg" class="aui-img-round aui-list-img-sm">
                </div>
                <div class="aui-list-item-inner aui-list-item-arrow">
                    <div class="aui-list-item-text aui-list-item-width">
                        <div class="aui-list-item-title aui-font-size-14">万利隆（新都汇店）</div>
                        <div class="aui-list-item-bg">晒图抢50元红包</div>
                    </div>
                    <div class="aui-list-item-text aui-list-item-mag">
                        评价有礼
                    </div>
                </div>
            </div>
        </li>
        <li class="aui-list-item">
            <div class="aui-list-item-label-icon">
                <i class="aui-iconfont aui-icon-edit"></i>
            </div>
            <div class="aui-list-item-inner">
                我的订单
            </div>
            <div class="icon-right">
                <i class="aui-iconfont aui-icon-right"></i>
            </div>
        </li>

        <li class="img-mag">
               <ul class="imags">
                   <li><img class="item" src="img/myWordMouth-img/wdkb-05.jpg"></li>
                   <li><img class="item" src="img/myWordMouth-img/wdkb-13.jpg.png"></li>
                   <li><img class="item" src="img/myWordMouth-img/wdkb-14.jpg.png"></li>
               </ul>
                <div class="circle">
                    <span class="circle-lit"></span>
                    <span class="circle-lit"></span>
                    <span class="circle-lit"></span>
                </div>
        </li>

        <li class="aui-list-item">
            <div class="aui-list-item-label-icon">
                <i class="aui-iconfont aui-icon-question"></i>
            </div>
            <div class="aui-list-item-inner">
                我的问答
            </div>
            <div class="icon-right">
                <i class="aui-iconfont aui-icon-right"></i>
            </div>
        </li>
        <li class="aui-list-item">
            <div class="aui-list-item-label-icon">
                <i class="aui-iconfont aui-icon-star"></i>
            </div>
            <div class="aui-list-item-inner">
                我的收藏
            </div>
            <div class="icon-right">
                <i class="aui-iconfont aui-icon-right"></i>
            </div>
        </li>
        <li class="aui-list-item">
            <div class="aui-list-item-label-icon">
                <i class="aui-iconfont aui-icon-my"></i>
            </div>
            <div class="aui-list-item-inner">
                我关注的手艺人
            </div>
            <div class="icon-right">
                <i class="aui-iconfont aui-icon-right"></i>
            </div>
        </li>
        <li class="aui-list-item">
            <div class="aui-list-item-label-icon">
                <i class="aui-iconfont aui-icon-edit"></i>
            </div>
            <div class="aui-list-item-inner">
                下载口碑APP
            </div>
            <div class="icon-right">
                <i class="aui-iconfont aui-icon-right"></i>
            </div>
        </li>
        <li class="aui-list-item">
            <div class="aui-list-item-label-icon">
                <i class="aui-iconfont aui-icon-info"></i>
            </div>
            <div class="aui-list-item-inner">
                帮助与反馈
            </div>
            <div class="icon-right">
                <i class="aui-iconfont aui-icon-right"></i>
            </div>
        </li>

    </ul>
</div>

<script type="text/javascript" src="jquery/jquery.min.js"></script>

<script>
    $(function () {
        $(document).ready(function () {
            var slideShow = $(".img-mag"),
                ul = slideShow.find("ul"),
                showNumber = slideShow.find(".circle-lit"),
                oneWidth = slideShow.find("ul li").eq(0).width();
            console.log(oneWidth);
            var iNow = 0;
            var timer = null;

            showNumber.on('click',function () {
               $(this).addClass("active").siblings().removeClass("active");
               var index = $(this).index();
               ul.animate({
                   "margin-left":-oneWidth*iNow,
               });
            });

            timer = setInterval(function () {
               iNow++;
               if (iNow>showNumber.length-1){
                   iNow = 0;
               }
               showNumber.eq(iNow).trigger("click");
            },1000);

        });
    });
</script>

</body>
</html>